<template>
  <div>
    <h1>首页</h1>
    <div id="box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  mounted() {
    this.getcate();
  },
  watch: {
    catelist() {
      let myChart = echarts.init(document.getElementById("box"));
      let options = {
        title: {
          text: "商品分类",
          left: "center",
        },
        tooltip: { show: true },
        xAxis: {
          type: "category",
          data: this.catelist.map((item) => item.catename),
        },
        yAxis: {
          type: "value",
          // axisLine:{show:true}  设置轴线
        },
        series: [
          {
            data: this.catelist.map((item) => {
              if (item.children) {
                return item.children.length;
              } else {
                return 0;
              }
            }),
            type: "line",
            smooth: true,
          },
        ],
      };
      myChart.setOption(options);
    },
  },
  computed: {
    ...mapGetters({
      catelist: "cate/getCateList",
    }),
  },
  methods: {
    ...mapActions({
      getcate: "cate/changeCateAction",
    }),
  },
};
</script>

<style lang="less"scoped>
#box {
  width: 800px;
  height: 400px;
  border: 1px solid #f4a621;
}
</style>
